<template>
  <div>
    <div style="margin-bottom: 20px;">
      <el-collapse accordion>
        <el-collapse-item>
          <template slot="title">
            <el-row type="flex" align="middle" style="width: 100%">
              <el-col :span="2" class="item-title">新用户立减</el-col>
              <el-col :span="20">
                下单立减{{activityInfo.lesss}}元，区域补贴￥{{activityInfo.agentSubsidy}}，商家承担{{activityInfo.lesss-activityInfo.agentSubsidy}}元
              </el-col>
              <el-col :span="2" style='text-align: right;color: #999; margin-right: 4px'>展开</el-col>
            </el-row>
          </template>
          <el-row type="flex" align="middle" class="item-item">
            <el-col :span="2" class="item-title">区域</el-col>
            <el-col :span="22">{{activityInfo.agentname}}</el-col>
          </el-row>
          <el-row type="flex" align="middle" class="item-item">
            <el-col :span="2" class="item-title">有效日期</el-col>
            <el-col :span="22">{{activityInfo.starttime}} - {{activityInfo.endtime}}</el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
    </div>
    <el-row type="flex" align="middle" style="height: 60px;background: #fff; padding: 0 15px;">
      <el-col :span="6" class="btns-table flex-row">
        <span :class="{'cur':params.selectType =='1'}" @click="changeType(1)">全部</span>
        <span :class="{'cur':params.selectType =='2'}" @click="changeType(2)">已上线</span>
        <span :class="{'cur':params.selectType =='3'}" @click="changeType(3)">未上线</span>
      </el-col>
      <el-col :span="10">
        <el-input placeholder="搜索商户" v-model="params.name" class="input-with-select" size="small">
          <el-button slot="append" icon="el-icon-search" @click="handleSizeChange(10)" />
        </el-input>
      </el-col>
    </el-row>
    <div class="base-table-wrap">
      <el-table :data="tableData.businessList" stripe style="width: 100%" tooltip-effect="dark" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="#" width="40" align="center" />
        <el-table-column prop="name" label="商户信息" min-width="160" align="center" />
        <el-table-column prop="mobile" label="联系人电话" min-width="160" align="center" />
        <el-table-column prop="createtime" label="创建时间" min-width="260" align="center" />
        <el-table-column fixed="right" label="商户状态(上线)" width="160" align="center">
          <template slot-scope="scope">
            <el-row type="felx" justify="center">
              <el-switch v-model="scope.row.online" active-color="#13ce66" @change="activitieOnline($event,scope.row.id)" />
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <!-- 复制 el-table v-loading  v-loading无法快速响应 所有自定义 -->
      <div class="base-directives-loading" v-show="isloadingTable">
        <div class="el-loading-spinner">
          <svg viewBox="25 25 50 50" class="circular">
            <circle cx="50" cy="50" r="20" fill="none" class="path" />
          </svg>
        </div>
      </div>
      <div class="base-pagination clearfix">
        <el-button type="primary" plain round size="mini" @click="activitiesOnline(1)">批量上线</el-button>
        <el-button type="danger" round size="mini" @click="activitiesOnline(2)">批量下线</el-button>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page.sync="newPage" :pageSize="pageSize" :page-sizes="[10, 20,30]" background
                       layout="total,sizes, prev, pager, next, jumper" :total="tableData.total"></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        isloadingTable: false,
        activityInfo: {}, //活动信息
        activeIds: [], // 选中的商家
        params: {
          selectType: '1',
          name: '',
          page: 0,
          size: 10,
        },
        pageSize: 10,
        newPage: 1,
        tableData: {},
      }
    },

    methods: {
      changeType(type) { //切换状态
        this.params.selectType = type
        this.handleSizeChange(10)
      },
      activitieOnline(online, id) { //单个商家上线
        let activityId = this.$route.query.id
        let params = {online, id, activityId}
        this.$http.post('/server/activity/setActivityToBusiness', JSON.stringify(params)).then(res => {
          if (res.data.success) {
            this.$message({type: 'success', message: '设置商家活动成功'})
          } else {
            this.tableData.businessList.forEach((item, index) => {
              if (item.id == id) {
                this.tableData.businessList[index].online = online ? false : true
                return
              }
            })
          }
        }).catch(err => {
          this.tableData.businessList.forEach((item, index) => {
            if (item.id == id) {
              this.tableData.businessList[index].online = online ? !online : online
              return
            }
          })
        })
      },
      activitiesOnline(type, index) { //批量上线下线
        let ids = this.activeIds
        if (ids.length == '0') {
          this.$message.warning('请勾选商家后操作')
          return false
        }
        let activityId = this.$route.query.id
        let online = type == '1' ? true : false
        let params = {ids, activityId, online}
        this.$http.post('/server/activity/setActivityToBusinesss', JSON.stringify(params)).then(res => {
          if (res.data.success) {
            this.$message({type: 'success', message: '批量设置商家活动成功'})
            this.getTableList()
          }
        })
      },
      handleSelectionChange(val) {  //选择表格数据
        let ids = []
        val.forEach((item, index) => {
          ids.push(item.id)
        })
        this.activeIds = ids
      },
      handleSizeChange(size) {  //设置分页数量
        this.params.size = size
        this.pageSize = size
        this.newPage = 1
        this.params.page = 0
        this.getTableList()
      },
      handleCurrentChange(page) { //切换分页
        this.params.page = page - 1
        this.getTableList()
      },
      getActivityInfo() { //获取活动信息
        this.$http.get('/server/activity/info?activityId=' + this.$route.query.id, {headers: {isCancel: true}}).then(res => {
          if (res.data.success) {
            this.activityInfo = res.data.data
          }
        })
      },
      getTableList(type) { //获取商家列表
        this.isloadingTable = true
        const params = { ...this.params }
        params.activityId = this.$route.query.id
        this.$http.get('/server/activity/selectActivityBusiness?' + this.qs.stringify(params)).then(res => {
          if (res.data.success) {
            this.tableData = res.data.data
          }
        }).finally(() => { this.isloadingTable = false })
      },
    },
    mounted() {
      if (this.$route.query.id) {
        this.getTableList()
        this.getActivityInfo()
      } else {
        this.$message({type: 'error', message: '当前页面信息有误!'})
        this.$router.push({path: '/main/activity/pron'})
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import './css/cbase.scss';
</style>
